<template>
    <div>
        <el-row :gutter="20">
            <el-col :span="6">
                <div>
                    <el-input size="small" v-model="userName" placeholder="用户名称"></el-input>
                </div>
            </el-col>
            <el-col :span="6">
                <div>
                    <el-button type="success" size="small" round>
                        <icon class="el-icon-search"/>
                        搜索
                    </el-button>
                    <el-button type="danger" size="small" round @click="openAdd">
                        <icon class="el-icon-plus"/>
                        新增
                    </el-button>
                </div>
            </el-col>
            <el-col :span="6">
                <div class="grid-content bg-purple"></div>
            </el-col>
            <el-col :span="6">
                <div class="grid-content bg-purple"></div>
            </el-col>
        </el-row>

        <div>
            <el-row :gutter="20">
                <el-col :span="4">
                    <div style="padding-top: 20px">
                        <el-tree
                                :accordion="true"
                                :data="deptTree"
                                :props="defaultProps"
                                :default-expand-all="true"
                                ref="tree"
                                @node-click="findUserListByDeptId"
                        ></el-tree>
                    </div>
                </el-col>
                <el-col :span="20">
                    <div style="padding-top: 20px;">
                        <el-table
                                :data="userList"
                                height="400"
                                border
                                size="mini"
                                style="width: 100%;">
                            <el-table-column
                                    prop="id"
                                    label="id"
                            >
                            </el-table-column>
                            <el-table-column
                                    prop="userName"
                                    label="账号"
                            >
                            </el-table-column>
                            <el-table-column
                                    prop="userNickName"
                                    label="姓名"
                            >
                            </el-table-column>
                            <el-table-column
                                    prop="userSex"
                                    label="性别"
                                    width="50px">
                            </el-table-column>
                            <el-table-column
                                    prop="userPhone"
                                    label="电话">
                            </el-table-column>
                            <el-table-column
                                    prop="userRole"
                                    label="角色">
                            </el-table-column>
                            <el-table-column
                                    prop="deptName"
                                    label="所属部门">
                            </el-table-column>
                            <el-table-column
                                    label="状态">
                                <template slot-scope="scope">
                                    <el-tag type="danger" v-if="scope.row.userStatus === 1">正常</el-tag>
                                    <el-tag v-if="scope.row.userStatus === 0">冻结</el-tag>
                                </template>
                            </el-table-column>
                            <el-table-column
                                    prop="createBy"
                                    label="创建人">
                            </el-table-column>
                            <el-table-column
                                    prop="createTime"
                                    label="创建时间">
                            </el-table-column>
                            <el-table-column label="操作" fixed="right" width="150">
                                <template slot-scope="scope">
                                    <el-button type="text" @click="deleteById(scope.row.id)" v-show="scope.row.userName !== 'admin'" icon="el-icon-delete">删除</el-button>
                                    <el-button type="text" @click="edit(scope.row)" icon="el-icon-edit">编辑</el-button>
                                    <el-button type="text" @click="frozenById(scope.row.id,1)" v-show="scope.row.userStatus === 0" icon="el-icon-check">解除冻结</el-button>
                                    <el-button type="text" @click="frozenById(scope.row.id,0)" v-show="scope.row.userStatus === 1 && scope.row.userName !== 'admin'" icon="el-icon-close">冻结</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </el-col>
            </el-row>

        </div>


        <el-dialog :title="editAndAddTitle" :visible.sync="dialogAdd" center width="40%" :destroy-on-close="true">
            <el-form :model="ruleForm" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="账号">
                    <el-input size="small" v-model="ruleForm.userName"></el-input>
                </el-form-item>
                <el-form-item label="名字">
                    <el-input size="small" v-model="ruleForm.userNickName"></el-input>
                </el-form-item>
                <el-form-item label="邮箱" prop="name">
                    <el-input size="small" v-model="ruleForm.userEmail"></el-input>
                </el-form-item>
                <el-form-item label="电话">
                    <el-input size="small" v-model="ruleForm.userPhone"></el-input>
                </el-form-item>
                <el-form-item size="small" label="密码" v-show="passwordShow">
                    <el-input type="password" v-model="ruleForm.userPassword"></el-input>
                </el-form-item>
                <el-form-item label="出生日期" size="small">
                    <el-date-picker
                            v-model="ruleForm.userBirthday"
                            type="datetime"
                            placeholder="选择日期时间">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="性别">
                    <el-radio v-model="ruleForm.userSex" label="1">男</el-radio>
                    <el-radio v-model="ruleForm.userSex" label="2">女</el-radio>
                </el-form-item>
                <el-form-item label="部门">
                    <el-button v-model="ruleForm.userDeptId" style="width: 100%" size="small" @click="getDept">
                        <span v-show="nextDeptShow">部门</span>
                        <span v-show="clickDeptShow">{{nodeName}}</span>
                    </el-button>
                </el-form-item>
                <el-form-item label="分配角色" size="small">
                    <el-select v-model="ruleForm.rolesInt" multiple placeholder="请选择">
                        <el-option
                                v-for="item in roleSelector"
                                :key="item.id"
                                :label="item.roleRemark"
                                :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button size="small" type="primary" @click="submitAdd" v-show="addShow">添加</el-button>
                    <el-button size="small" type="primary" @click="submitEdit" v-show="editShow">修改</el-button>
                    <el-button size="small">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>

        <!--部门菜单-->
        <el-dialog
                title="部门"
                :visible.sync="deptDialog"
                width="20%"
                center
                modal
                :destroy-on-close="true">
            <el-tree
                    :accordion="true"
                    :data="deptTree"
                    :props="defaultProps"
                    ref="tree"
                    @node-click="handleNodeClick"
            ></el-tree>
            <span slot="footer" class="dialog-footer">
    <el-button @click="getNodeNO" size="small">取 消</el-button>
    <el-button type="primary" @click="getNodeOK" size="small">确 定</el-button>
  </span>
        </el-dialog>

    </div>
</template>

<script>
    import {findDeptTree} from "../../api/deptApi";
    import {getRoleSelector} from "../../api/roleApi";
    import {addUser, deleteUserById, editUser, frozenUserById, getUserList} from "../../api/userApi";
    import {MessageBox,Message} from "element-ui";

    export default {
        name: "SysUser",
        data() {
            return {
                addShow:false, //添加按钮
                editShow:false, //修改按钮
                uStatus: true,//用户状态
                userList: [],
                defaultProps: {
                    label: 'deptName',
                    children: 'children',
                },
                deptTree: [],
                nextDeptShow: true,
                clickDeptShow: false,
                deptDialog: false,
                dialogAdd: false,
                passwordShow:true,
                roleSelector: [], //角色下拉框
                ruleForm: {
                    userName: '',//账号
                    userSex: '',
                    userNickName: '',//名字
                    userEmail: '',
                    userPhone: '',
                    userBirthday: '',
                    userDeptId: '',
                    userPassword: '',
                },
                editAndAddTitle:'',//添加和修改标题
            }
        },

        created() {
            findDeptTree().then(res => {
                this.deptTree = res.data;
            });

            getUserList(1).then(res => {
                this.userList = res.data;
            }).catch(() => {

            })
        },

        methods: {
            //表单重置
            formReset(){
                this.ruleForm={
                        userName: '',//账号
                        userSex: '',
                        userNickName: '',//名字
                        userEmail: '',
                        userPhone: '',
                        userBirthday: '',
                        userDeptId: '',
                        userPassword: '',
                        rolesInt: [],
                };
                this.nodeName='部门'
            },

            /**
             * 冻结用户
             */
            frozenById(id,status){
                MessageBox.confirm('你确定要对id为['+id+']的用户进行冻结/解冻操作吗','安全提示',{
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                }).then(() =>{
                    frozenUserById(id,status).then(() => {
                        this.$message.success("操作成功")
                    }).catch(() =>{
                        this.$message.error("操作失败")
                    })
                })
            },

            /**
             * 编辑用户
             */
            edit(userInfo){
                this.formReset();
                this.editAndAddTitle = '编辑用户';
                this.dialogAdd = true;
                this.ruleForm = userInfo;
                getRoleSelector().then(res => { //获取角色列表
                    this.roleSelector = res.data;
                }).then(() => {

                });
                this.editShow = true; //显示修改按钮
                this.addShow = false; //不显示添加按钮
                this.nextDeptShow = false;
                this.clickDeptShow = true;
                this.passwordShow = false;
                this.nodeName = userInfo.deptName;
            },

            //删除用户
            deleteById(id){
                MessageBox.confirm('你确定删除id为['+id+']此条记录吗', '安全提醒', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                }).then(() =>{
                    deleteUserById(id).then(() => {
                        this.$message.success("删除成功");
                    }).catch(() =>{
                        this.$message.error("删除失败");
                    })
                });
            },

            //根据部门id获取对应的用户
            findUserListByDeptId(node){
                this.userList = null;
                getUserList(node.id).then(res => {
                    this.userList = res.data;
                })
            },

            getNodeNO() {
                this.deptDialog = false;
            },

            getNodeOK() {
                this.deptDialog = false;
                this.nextDeptShow = false;
                this.clickDeptShow = true;
            },

            /**
             * 修改
             */
            submitEdit(){
                editUser(this.ruleForm).then(() =>{
                    Message.success("修改成功");
                    this.dialogAdd = false
                }).catch(() =>{
                    Message.error("修改失败")
                });
                console.log("修改   "+JSON.stringify(this.ruleForm))
            },

            //添加
            submitAdd() {
                addUser(this.ruleForm).then(res => {
                    if (res.data.errorCode === 50001) {
                        this.$message.warning(res.data.errorMsg)
                    } else {
                        this.$message.success("添加成功");
                        this.dialogAdd = false;
                    }
                }).catch(() => {

                })
            },
            /**
             * 添加弹出框
             */
            openAdd() {
                this.editAndAddTitle = '添加用户';
                this.formReset();
                this.addShow = true;
                this.editShow = false;
                this.dialogAdd = true;
                //获取角色列表
                getRoleSelector().then(res => {
                    this.roleSelector = res.data;
                }).then(() => {

                })
            },

            getDept() {
                this.deptDialog = true;
            },

            /**
             * 部门选择
             * @param nodeSelect
             */
            handleNodeClick(nodeSelect) {
                this.ruleForm.userDeptId = nodeSelect.id;
                this.nodeName = nodeSelect.deptName;
            },
        },


    }
</script>

<style scoped>

</style>
